<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="Social Buttons for Bootstrap"/>
  <meta property="og:description"
        content="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!"/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="http://lipis.github.io/bootstrap-social/"/>
  <meta property="og:image" content="http://lipis.github.io/bootstrap-social/assets/img/bootstrap-social.png"/>

  <title>Social Buttons for Bootstrap</title>
  <link href="assets/css/bootstrap.css" rel="stylesheet">
  <link href="assets/css/font-awesome.css" rel="stylesheet">
  <link href="assets/css/docs.css" rel="stylesheet">

  <!-- SweetAlert for Bootstrap -->
  <script src="//lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.js"></script>
  <link href="//lipis.github.io/bootstrap-sweetalert/lib/sweet-alert.css" rel="stylesheet">

  <link href="bootstrap-social.css" rel="stylesheet">

  <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-42119746-1']);
    _gaq.push(['_trackPageview']);

    (function () {
      var ga = document.createElement('script');
      ga.type = 'text/javascript';
      ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga, s);
    })();

  </script>

</head>

<body>
<div class="jumbotron">
  <div class="container">
    <h1>Social Buttons for Bootstrap</h1>

    <p>
      Social Sign-In Buttons made in pure CSS based on
      <a href="http://twitter.github.io/bootstrap/">Bootstrap</a> and
      <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>!
    </p>
    <a href="https://github.com/lipis/bootstrap-social" class="btn btn-outline btn-large"
       onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'GitHub']);"><i class="fa fa-github"></i> View on GitHub</a>
    <ul class="jumbotron-links">
      <li><a href="http://lipis.github.io/bootstrap-sweetalert"
             onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'bootstrap-sweetalert']);"><i
        class="fa fa-exclamation-triangle"></i> bootstrap-sweetalert</a></li>
      <li><a href="http://lipis.github.io/flag-icon-css"
             onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']);"><i class="fa fa-flag"></i>
        flag-icon-css</a></li>
    </ul>
    <iframe src="http://ghbtns.com/github-btn.html?user=lipis&amp;repo=bootstrap-social&amp;type=watch&amp;count=true"
            class="social-share"></iframe>
    <a href="https://twitter.com/share" class="social-share twitter-share-button"
       data-url="http://lipis.github.io/bootstrap-social/"
       data-text="Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!" data-via="lipis"
       data-hashtags="bootstrap css">Tweet</a>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-sm-offset-3 col-sm-6">
      <div class="alert alert-success lead text-center">
        Check out the latest project<br>
        <a class="sweet-alert-link alert-link" href="#"
           onclick="_gaq.push(['_trackEvent', 'exit', 'header', 'flag-icon-css']); return null;">SweetAlert for
          Bootstrap</a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 social-buttons">
      <h3>The Buttons</h3>
      <a class="btn btn-block btn-social btn-adn"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-adn']);">
        <i class="fa fa-adn"></i> Sign in with App.net
      </a>
      <a class="btn btn-block btn-social btn-bitbucket"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-bitbucket']);">
        <i class="fa fa-bitbucket"></i> Sign in with Bitbucket
      </a>
      <a class="btn btn-block btn-social btn-dropbox"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-dropbox']);">
        <i class="fa fa-dropbox"></i> Sign in with Dropbox
      </a>
      <a class="btn btn-block btn-social btn-facebook"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-facebook']);">
        <i class="fa fa-facebook"></i> Sign in with Facebook
      </a>
      <a class="btn btn-block btn-social btn-flickr"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-flickr']);">
        <i class="fa fa-flickr"></i> Sign in with Flickr
      </a>
      <a class="btn btn-block btn-social btn-foursquare"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-foursquare']);">
        <i class="fa fa-foursquare"></i> Sign in with Foursquare
      </a>
      <a class="btn btn-block btn-social btn-github"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-github']);">
        <i class="fa fa-github"></i> Sign in with GitHub
      </a>
      <a class="btn btn-block btn-social btn-google-plus"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-google-plus']);">
        <i class="fa fa-google-plus"></i> Sign in with Google
      </a>
      <a class="btn btn-block btn-social btn-instagram"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-instagram']);">
        <i class="fa fa-instagram"></i> Sign in with Instagram
      </a>
      <a class="btn btn-block btn-social btn-linkedin"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-linkedin']);">
        <i class="fa fa-linkedin"></i> Sign in with LinkedIn
      </a>
      <a class="btn btn-block btn-social btn-microsoft"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-microsoft']);">
        <i class="fa fa-windows"></i> Sign in with Microsoft
      </a>
      <a class="btn btn-block btn-social btn-openid"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-openid']);">
        <i class="fa fa-openid"></i> Sign in with OpenID
      </a>
      <a class="btn btn-block btn-social btn-pinterest"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-pinterest']);">
        <i class="fa fa-pinterest"></i> Sign in with Pinterest
      </a>
      <a class="btn btn-block btn-social btn-reddit"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-reddit']);">
        <i class="fa fa-reddit"></i> Sign in with Reddit
      </a>
      <a class="btn btn-block btn-social btn-soundcloud"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-soundcloud']);">
        <i class="fa fa-soundcloud"></i> Sign in with SoundCloud
      </a>
      <a class="btn btn-block btn-social btn-tumblr"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-tumblr']);">
        <i class="fa fa-tumblr"></i> Sign in with Tumblr
      </a>
      <a class="btn btn-block btn-social btn-twitter"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-twitter']);">
        <i class="fa fa-twitter"></i> Sign in with Twitter
      </a>
      <a class="btn btn-block btn-social btn-vimeo"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vimeo']);">
        <i class="fa fa-vimeo-square"></i> Sign in with Vimeo
      </a>
      <a class="btn btn-block btn-social btn-vk" onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-vk']);">
        <i class="fa fa-vk"></i> Sign in with VK
      </a>
      <a class="btn btn-block btn-social btn-yahoo"
         onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-yahoo']);">
        <i class="fa fa-yahoo"></i> Sign in with Yahoo!
      </a>

      <hr>

      <div class="text-center">
        <a class="btn btn-social-icon btn-adn"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-adn']);"><i class="fa fa-adn"></i></a>
        <a class="btn btn-social-icon btn-bitbucket"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-bitbucket']);"><i
          class="fa fa-bitbucket"></i></a>
        <a class="btn btn-social-icon btn-dropbox"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-dropbox']);"><i
          class="fa fa-dropbox"></i></a>
        <a class="btn btn-social-icon btn-facebook"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-facebook']);"><i
          class="fa fa-facebook"></i></a>
        <a class="btn btn-social-icon btn-flickr"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-flickr']);"><i class="fa fa-flickr"></i></a>
        <a class="btn btn-social-icon btn-foursquare"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-foursquare']);"><i
          class="fa fa-foursquare"></i></a>
        <a class="btn btn-social-icon btn-github"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-github']);"><i class="fa fa-github"></i></a>
        <a class="btn btn-social-icon btn-google-plus"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-google-plus']);"><i
          class="fa fa-google-plus"></i></a>
        <a class="btn btn-social-icon btn-instagram"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-instagram']);"><i
          class="fa fa-instagram"></i></a>
        <a class="btn btn-social-icon btn-linkedin"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-linkedin']);"><i
          class="fa fa-linkedin"></i></a>
        <a class="btn btn-social-icon btn-microsoft"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-microsoft']);"><i
          class="fa fa-windows"></i></a>
        <a class="btn btn-social-icon btn-openid"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-openid']);"><i class="fa fa-openid"></i></a>
        <a class="btn btn-social-icon btn-pinterest"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-pinterest']);"><i
          class="fa fa-pinterest"></i></a>
        <a class="btn btn-social-icon btn-reddit"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-reddit']);"><i class="fa fa-reddit"></i></a>
        <a class="btn btn-social-icon btn-soundcloud"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-soundcloud']);"><i
          class="fa fa-soundcloud"></i></a>
        <a class="btn btn-social-icon btn-tumblr"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-tumblr']);"><i class="fa fa-tumblr"></i></a>
        <a class="btn btn-social-icon btn-twitter"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-twitter']);"><i
          class="fa fa-twitter"></i></a>
        <a class="btn btn-social-icon btn-vimeo"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vimeo']);"><i
          class="fa fa-vimeo-square"></i></a>
        <a class="btn btn-social-icon btn-vk"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-vk']);"><i class="fa fa-vk"></i></a>
        <a class="btn btn-social-icon btn-yahoo"
           onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-yahoo']);"><i
          class="fa fa-yahoo"></i></a>
      </div>
    </div>

    <div class="col-sm-4">
      <h3>Available Classes</h3>
      <ul class="social-class list-unstyled">
        <li data-code="adn" data-name="App.net"><code>btn-adn</code> <span class="social-hex">#D87A68</span></li>
        <li data-code="bitbucket" data-name="Bitbucket"><code>btn-bitbucket</code> <span
          class="social-hex">#205081</span></li>
        <li data-code="dropbox" data-name="Dropbox"><code>btn-dropbox</code> <span class="social-hex">#1087DD</span>
        </li>
        <li data-code="facebook" data-name="Facebook"><code>btn-facebook</code> <span class="social-hex">#3B5998</span>
        </li>
        <li data-code="flickr" data-name="Flickr"><code>btn-flickr</code> <span class="social-hex">#2BA9E1</span></li>
        <li data-code="foursquare" data-name="Foursquare"><code>btn-foursquare</code> <span
          class="social-hex">#f94877</span></li>
        <li data-code="github" data-name="GitHub"><code>btn-github</code> <span class="social-hex">#444444</span></li>
        <li data-code="google-plus" data-name="Google"><code>btn-google-plus</code> <span
          class="social-hex">#DD4B39</span></li>
        <li data-code="instagram" data-name="Instagram"><code>btn-instagram</code> <span
          class="social-hex">#3F729B</span></li>
        <li data-code="linkedin" data-name="LinkedIn"><code>btn-linkedin</code> <span class="social-hex">#007BB6</span>
        </li>
        <li data-code="microsoft" data-icon="windows" data-name="Microsoft"><code>btn-microsoft</code> <span
          class="social-hex">#2672EC</span></li>
        <li data-code="openid" data-name="OpenID"><code>btn-openid</code> <span class="social-hex">#F7931E</span></li>
        <li data-code="pinterest" data-name="Pinterest"><code>btn-pinterest</code> <span
          class="social-hex">#CB2027</span></li>
        <li data-code="reddit" data-name="Reddit"><code>btn-reddit</code> <span class="social-hex">#EFF7FF</span></li>
        <li data-code="soundcloud" data-name="SoundCloud"><code>btn-soundcloud</code> <span
          class="social-hex">#FF5500</span></li>
        <li data-code="tumblr" data-name="Tumblr"><code>btn-tumblr</code> <span class="social-hex">#CB2027</span></li>
        <li data-code="twitter" data-name="Twitter"><code>btn-twitter</code> <span class="social-hex">#55ACEE</span>
        </li>
        <li data-code="vimeo" data-icon="vimeo-square" data-name="Vimeo"><code>btn-vimeo</code> <span
          class="social-hex">#1AB7EA</span></li>
        <li data-code="vk" data-name="VK"><code>btn-vk</code> <span class="social-hex">#587EA3</span></li>
        <li data-code="yahoo" data-name="Yahoo!"><code>btn-yahoo</code> <span class="social-hex">#720E9E</span></li>
      </ul>
    </div>
    <div class="col-sm-4">
      <div class="social-sizes">
        <h3>Different Sizes</h3>
        <a class="btn btn-block btn-social btn-lg btn-google-plus"
           onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-lg']);">
          <i class="fa fa-google-plus"></i>
          Sign in with Google
        </a>
        <a class="btn btn-block btn-social btn-google-plus"
           onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-md']);">
          <i class="fa fa-google-plus"></i>
          Sign in with Google
        </a>
        <a class="btn btn-block btn-social btn-sm btn-google-plus"
           onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-sm']);">
          <i class="fa fa-google-plus"></i>
          Sign in with Google
        </a>
        <a class="btn btn-block btn-social btn-xs btn-google-plus"
           onclick="_gaq.push(['_trackEvent', 'btn-social', 'click', 'btn-xs']);">
          <i class="fa fa-google-plus"></i>
          Sign in with Google
        </a>
        <hr>
        <div class="text-center">
          <a class="btn btn-social-icon btn-lg btn-google-plus"
             onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-lg']);"><i
            class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-google-plus"
             onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-md']);"><i
            class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-sm btn-google-plus"
             onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-sm']);"><i
            class="fa fa-google-plus"></i></a>
          <a class="btn btn-social-icon btn-xs btn-google-plus"
             onclick="_gaq.push(['_trackEvent', 'btn-social-icon', 'click', 'btn-xs']);"><i
            class="fa fa-google-plus"></i></a>
        </div>
      </div>
      <hr>
      <div class="alert alert-info">
        <h4>Check them out in real projects</h4>
        <ul>
          <li><a class="alert-link" href="https://gae-init.appspot.com/signin/"
                 onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'gae-init']);">gae-init</a></li>
          <li><a class="alert-link" href="https://restaurant.app.foodit.com/rms/signin"
                 onclick="_gaq.push(['_trackEvent', 'exit', 'body', 'foodit']);">FOODit</a></li>
        </ul>
      </div>
    </div>
  </div>
  <hr>
</div>
<div class="how-to">
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h2>How to use</h2>
        <ol>
          <li>
            Include Bootstrap and Font Awesome
            <p>
              If you haven't done that already, include the latest
              <a href="http://twitter.github.io/bootstrap/">Bootstrap</a>
              and <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a> in your project.
            </p>
          </li>
          <li>
            Include the CSS or LESS
            <p>
              You have two options for enabling the social buttons in your project:
              vanilla CSS or source LESS. For vanilla CSS, just include the
              <code>bootstrap-social.css</code> file into your project.
            </p>

            <p>
              For LESS, copy the <code>bootstrap-social.less</code> into
              your existing Bootstrap directory and import it into
              <code>bootstrap.less</code> via
              <code>@import "bootstrap-social.less";</code>. Recompile when ready.
            </p>
          </li>
          <li>
            Add some buttons!
            <p>
              Start using the buttons as you would normally do with the
              Bootstrap buttons that have an icon by adding the relevant
              class. For example:
            </p>
                <pre>
  &lt;a class=&quot;btn btn-block <strong class="text-danger">btn-social</strong> <strong
                  class="text-info">btn-twitter</strong>&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt; Sign in with Twitter
  &lt;/a&gt;</pre>
            <p>
              Or if you just want the icon button, use it like this:
            </p>
                <pre>
  &lt;a class=&quot;btn <strong class="text-danger">btn-social-icon</strong> <strong
                  class="text-info">btn-twitter</strong>&quot;&gt;
    &lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;
  &lt;/a&gt;</pre>
          </li>
        </ol>
      </div>
    </div>
  </div>
</div>
<hr>
<footer>
  <ul class="links">
    <li><a href="http://lip.is" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Lipis']);">Lipis</a></li>
    <li><a href="http://github.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'GitHub']);"><i
      class="fa fa-github"></i> GitHub</a></li>
    <li><a href="http://twitter.com/lipis" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Twitter']);"><i
      class="fa fa-twitter"></i> Twitter</a></li>
    <li><a href="http://google.com/+PanayiotisLipiridis"
           onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'Google+']);"><i class="fa fa-google-plus"></i> Google+</a>
    </li>
    <li><a href="http://opensource.org/licenses/MIT" onclick="_gaq.push(['_trackEvent', 'exit', 'footer', 'MIT']);"><i
      class="fa fa-building"></i> MIT License</a></li>
  </ul>
</footer>
<a href="https://github.com/lipis/bootstrap-social"><img style="position: absolute; top: 0; left: 0; border: 0;"
                                                         src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"
                                                         alt="Fork me on GitHub"></a>

<!-- Some JavaScript that is used only in this demo, not needed for the buttons -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/docs.js"></script>
<script>
  !function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
      js = d.createElement(s);
      js.id = id;
      js.src = p + '://platform.twitter.com/widgets.js';
      fjs.parentNode.insertBefore(js, fjs);
    }
  }(document, 'script', 'twitter-wjs');
</script>

<script>
  document.querySelector('.sweet-alert-link').onclick = function () {
    swal({
        title: "SweetAlert for Bootstrap!",
        text: "It exactly what you see here.",
        type: "success",
        showCancelButton: true,
        confirmButtonClass: 'btn-success',
        confirmButtonText: 'Take me there!',
        cancelButtonText: "Cancel",
        closeOnConfirm: false,
        closeOnCancel: false
      },
      function (isConfirm) {
        if (isConfirm) {
          window.location.href = "http://lipis.github.io/bootstrap-sweetalert/";
        } else {
          swal("Thanks!", "But I still think you should visit it.", "warning");
        }
      });
  };
</script>
</body>
</html>
